import { FC, memo } from 'react';
import { Monitor } from '@/types/monitor';
import MinerCountStrip from '@/components/miner-count-strip/MinerCountStrip';
import styles from './monitorCard.module.less';
import { Group } from '@/types/group';
import dayjs from 'dayjs';
import { history } from 'umi';

interface IMonitorCardProps {
  monitor: Monitor;
}

const GroupTable = (props: { groupList: Group[] }) => {
  return (
    <table className={`w-100 text-left ${styles.groupTable}`}>
      <thead>
        <tr>
          <th>分组</th>
          <th>矿机数</th>
          <th>币种</th>
          <th>实时算力</th>
        </tr>
      </thead>
      <tbody>
        {props.groupList.map((group, index) => {
          if (index < 3) {
            return (
              <tr key={group.gid}>
                <td>{group.name}</td>
                <td>{group.miner_num}</td>
                <td>{group.main_coin}</td>
                <td>{group.hashFormat}</td>
              </tr>
            );
          } else {
            return null;
          }
        })}
      </tbody>
    </table>
  );
};

const OfflineCount = (props: { count: number }) => {
  const { count } = props;
  if (count > 0) {
    return (
      <span
        className={`offline-count-bg`}
        style={{
          padding: '2px',
          marginLeft: '3px',
          color: '#fff',
          display: 'inline-block',
          borderRadius: '4px',
        }}
      >
        {count}
      </span>
    );
  }

  return <span>{count}</span>;
};

const MonitorCard: FC<IMonitorCardProps> = (props) => {
  const { monitor } = props;
  if (!monitor || !monitor.minerCount) {
    return null;
  }
  return (
    <div className={styles.monitorCard}>
      <div className={`flex ai-center ${styles.line1}`}>
        <div
          className={`flex-1 ${styles.name}`}
          onClick={() => history.push(`/group/${monitor.id}/main`)}
        >
          {monitor.name}
        </div>
        <div
          className={`flex ai-center`}
          onClick={() => history.push(`/group/${monitor.id}/miner`)}
        >
          <div className={styles.minerCountTip}>矿机总数/离线：</div>
          <div className={styles.minerCount}>
            {monitor.miner_num}/
            <OfflineCount count={monitor.minerCount.offline_count} />
          </div>
        </div>
      </div>
      <MinerCountStrip
        containerStyle={{ width: '100%', height: '4px' }}
        minerCount={monitor.minerCount}
        miner_num={monitor.miner_num}
      />
      <div className={`flex ${styles.line3}`}>
        <div
          className={`flex-1 flex`}
          onClick={() => history.push(`/group/${monitor.id}/miner`)}
        >
          <div className={styles.label}>最高温度：</div>
          <div>{monitor.hottest}</div>
        </div>
        <div>
          <span className={styles.label}>权限：</span>
          {monitor.power}
        </div>
      </div>

      <div className={styles.line4}>
        <GroupTable groupList={monitor.groupList} />
      </div>
      <div
        className={styles.line5}
        onClick={() => history.push(`/group/${monitor.id}/grouping`)}
      >
        更多..
      </div>
      <div className={styles.versionTip}>
        <span>v.{monitor.version}</span>
        <span>
          数据更新时间：
          {dayjs.unix(monitor.mtime).format('YYYY.MM.DD HH:mm:ss')}
        </span>
      </div>
    </div>
  );
};

export default memo(MonitorCard);
